<template>
	<view class="brand" v-if="list.length > 0">
		<view class="brand-header u-flex-between">
			<view class="brand-left u-flex">
				<view class="header-text">品牌合集</view>
				<view class="major-suit">大牌优选</view>
			</view>
			<!-- <view class="more">更多</view> -->
		</view>
		<view class="li-box">
			<view class="li" v-for="(item,index) in list" :key="index" v-if="index < 16"
				@click="$emit('brandClick',item.name)">
				<u-image :src="item.image || ''" width="160rpx" height="64rpx"></u-image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			list: {
				type: Array,
				default: (() => {
					return [];
				})
			},
		},
		methods: {}
	}
</script>

<style lang="scss">
	.brand {
		padding-top: 40rpx;

		.brand-header {
			line-height: 1;

			.brand-left {
				.header-text {
					padding-right: 20rpx;
					font-size: 32rpx;
					color: #FFFFFF;
					border-right: 2rpx solid #707070;
				}

				.major-suit {
					padding-left: 20rpx;
					font-size: 32rpx;
					color: #FFCE97;
				}
			}

			.more {
				font-size: 28rpx;
				color: #666666;
			}
		}

		.li-box {
			display: grid;
			grid-column-gap: 18rpx;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			grid-row-gap: 20rpx;
			margin-top: 30rpx;

			.li {
				box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(0, 0, 0, 0.3);
				border-radius: 4rpx;
				height: 64rpx;
			}
		}
	}
</style>